<template>
  <el-dialog
    :modelValue="isShowAddDialog"
    :title="multiLanguages('add')"
    width="30%"
    align-center
    :show-close="false"
    destroy-on-close
    @close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="addUserFrom"
      :rules="checkRules(multiLanguages)"
      :validate-on-rule-change="isFastValidate"
      status-icon
      label-position="top"
    >
      <el-form-item prop="username" :label="multiLanguages('username')">
        <el-input size="large" v-model.trim="addUserFrom.username" />
      </el-form-item>
      <el-form-item prop="password" :label="multiLanguages('password')">
        <el-input size="large" v-model.trim="addUserFrom.password" show-password />
      </el-form-item>
      <el-form-item prop="email" :label="multiLanguages('email')">
        <el-input size="large" v-model.trim="addUserFrom.email" />
      </el-form-item>
      <el-form-item prop="fullName" :label="multiLanguages('full_name')">
        <el-input size="large" v-model.trim="addUserFrom.fullName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <StepButton
          :multiLanguages="multiLanguages"
          :showButtons="['cancel', 'confirm']"
          @close-event="closeDialog"
          @confirm-event="confirm"
        />
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import { initAddUserFrom, checkRules } from "./form";
import StepButton from "../common/stepButton.vue";
const props = defineProps<{
  multiLanguages: any;
  isShowAddDialog: boolean;
}>();
const emits = defineEmits(["update:isShowAddDialog"]);
/**表单对象 */
const ruleFormRef = ref<FormInstance>();
const addUserFrom = reactive(initAddUserFrom);
/**是否在 rules 属性改变后立即触发一次验证 */
const isFastValidate = ref(false);
const closeDialog = () => {
  ruleFormRef.value!.resetFields();
  emits("update:isShowAddDialog", false);
};
/**确定事件 */
const confirm = async () => {
  await ruleFormRef.value!.validate(valid => {
    if (valid) {
      closeDialog();
    } else {
      isFastValidate.value = true;
    }
  });
};
</script>
<style scoped lang="less"></style>
